<script setup lang="ts">
import {onMounted, reactive} from "vue";
import panel1 from '@/assets/images/jxdd/panel1.png'
import panel2 from '@/assets/images/jxdd/panel2.png'
import panel3 from '@/assets/images/jxdd/panel3.png'
import panel4 from '@/assets/images/jxdd/panel4.png'
import panel5 from '@/assets/images/jxdd/panel5.png'
import {exeAnimat} from "@/utils";
onMounted(() => {
  exeAnimat()
})
const vueData=reactive({
  panelCurrent: 0,
  panelList:[
    {
      title:'01.全新商业模式',
      content:'融合本地生活服务、商城、支付、会员、积分、抵扣券、 红包等优质功能，打造吃喝玩乐购联盟生态系统',
      image: panel1
    },
    {
      title:'02.管理系统',
      content:'专业商家后台管理，会员信息、经营数据、跨界收益 一目了然',
      image: panel2
    },
    {
      title:'03.供应链',
      content:'自有供应链体系，有上万款商品正常供应及价格优势',
      image: panel3
    },
    {
      title:'04.专业团队',
      content:'自有技术研发团队，软件著作权、ICP备案，系统迭代',
      image: panel4
    },
    {
      title:'05.资金保障',
      content:'合作第三方上市支付公司，所有资金流水受银监 会监管，保证资金安全，杜绝二清风险',
      image: panel5
    },
  ]
})
</script>
<template>
<div>
  <div class="h-700px bg1">
    <v-container class="!pt-100px h-full flex items-center">
      <div class="flex-1 mr-40p text-white">
        <div class="text-40px leading-48px left-in-1">联盟全国本地生活商家</div>
        <div class="text-110px left-in-2 mb-37px font-weight-bold leading-130px">
          <span>吃喝玩乐购</span>
        </div>
        <div class="btn-scale">
          <v-btn
            class="!rounded-50px mb-40px"
            color="#ffffff"
            height="40px"
            variant="outlined">
            <span class="text-20px">赋能实体商家带动大众创业</span>
          </v-btn>
        </div>
        <div class="bottom-in">
          <v-img src="@/assets/images/jxdd/img1.png" width="420"></v-img>
        </div>
      </div>
      <div class="flex-1 right-distance">
        <v-img src="@/assets/images/jxdd/head-img.png" height="550"></v-img>
      </div>
    </v-container>
  </div>
  <v-container class="!py-100px">
    <div class="flex items-center">
      <div class="flex-1 mr-60px">
        <div class="text-36px tracking-3px font-bold mb-20px left-in-1">鲸喜多多</div>
        <div class="left-in-2 text-hex-8C8C8C leading-36px pr-20px text-24px mb-30px font-light">
          采用大数据分析+AI智能算法核心技术，结合生活消费场景，以
          <span class="text-hex-EB6130">
            “消费多少赠送多少，消费者正常消费就可以给商家带来终生的收益”
          </span>
          为模式,
          <span class="text-hex-EB6130">
            “消费者日常消费=赚钱”
          </span>
          为驱动，让消费者享受省钱又赚钱的消费新体验。 同时平台以创新的高价值积分消费和跨界增收模式为各行业多维度赋能。
        </div>
        <v-btn
          class="!rounded-10px btn-scale"
          color="#EE5F2E"
          height="50px"
          variant="flat">
          <span class="text-20px">免费入驻鲸喜多多平台</span>
        </v-btn>
      </div>
      <div class="flex-1">
        <v-img src="@/assets/images/jxdd/card1.png" class="right-in-1"></v-img>
      </div>
    </div>
  </v-container>
  <v-container class="!pb-100px">
    <div class="pt-46px pb-50px text-center tracking-3px">
      <div class="text-36px mb-30px bottom-fade-in-2">作为实体商家，你是否经历过这些问题？</div>
    </div>
    <div class="flex items-center">
      <div class="flex-1 mr-80px">
        <v-img class="left-in-1" src="@/assets/images/jxdd/card2.png" cover :height="600"></v-img>
      </div>
      <div class="flex-1">
        <v-img class="right-in-2" src="@/assets/images/jxdd/card3.png" :width="500"></v-img>
      </div>
    </div>
  </v-container>
  <div>
    <v-parallax height="600px" src="@/assets/images/jxdd/card4.png">
      <div class="flex items-center justify-center h-full">
        <v-container>
          <div class="text-36px text-white text-center mb-70px bottom-fade-in-2">鲸喜多多将带给你全新的订单增长体验</div>
          <v-row class="flex-nowrap">
            <v-col>
              <v-img class="bottom-fade-in" src="@/assets/images/jxdd/ty1.png" :height="259"></v-img>
            </v-col>
            <v-col>
              <v-img class="bottom-fade-in-1" src="@/assets/images/jxdd/ty2.png" :height="259"></v-img>
            </v-col>
            <v-col>
              <v-img class="bottom-fade-in-2" src="@/assets/images/jxdd/ty3.png" :height="259"></v-img>
            </v-col>
            <v-col>
              <v-img class="bottom-fade-in-3" src="@/assets/images/jxdd/ty4.png" :height="259"></v-img>
            </v-col>
            <v-col>
              <v-img class="bottom-fade-in-4" src="@/assets/images/jxdd/ty5.png" :height="259"></v-img>
            </v-col>
          </v-row>
        </v-container>
      </div>
    </v-parallax>
  </div>
  <v-container class="!pb-100px !pt-50px">
    <div class="pb-50px flex flex-col items-center tracking-3px">
      <div class="text-36px mb-30px">五大优势颠覆传统互联网平台</div>
      <div class="text-hex-96999C text-18px">从新手到常态经营全阶段提供个性化建议和帮助</div>
    </div>
    <div class="flex items-center justify-center">
      <div class="flex-1 mr-50px flex justify-end">
        <v-expansion-panels class="left-in-2" variant="accordion" v-model="vueData.panelCurrent">
          <v-expansion-panel class="mb-10px pt-10px" :elevation="0" v-for="(item,index) in vueData.panelList" :key="index" :value="index">
            <v-expansion-panel-title v-ripple="{ class: 'text-primary' }">
              <div class="text-30px">{{ item.title }}</div>
            </v-expansion-panel-title>
            <v-expansion-panel-text class="text-hex-95989B text-20px leading-30px">
              {{ item.content }}
            </v-expansion-panel-text>
          </v-expansion-panel>
        </v-expansion-panels>
      </div>
      <div class="flex-1 overflow-hidden relative">
        <v-window v-model="vueData.panelCurrent" :show-arrows="false" direction="vertical">
          <v-window-item
            v-for="(item,index) in vueData.panelList" :key="index" :value="index">
            <v-img :src="item.image" :width="500" :height="400" class="btn-scale"></v-img>
          </v-window-item>
        </v-window>
      </div>
    </div>
  </v-container>

  <v-container class="!pb-100px">
    <div class="pb-50px flex flex-col items-center tracking-3px">
      <div class="text-36px mb-30px bottom-fade-in-2">五大核心优势助您店铺降本增效</div>
    </div>
    <v-img src="@/assets/images/jxdd/card8.png" class="bottom-fade-in-2" :height="620"></v-img>
  </v-container>
</div>
</template>

<style scoped>
.bg1{
  background: #FF5A28;
}
@keyframes showup {
  from {
    background: #FF5A28;
    letter-spacing: -120px;
  }

  to {
    filter: blur(0);
    letter-spacing: 0;
  }
}
.text-mingle-animation {
  filter: contrast(10);
  background: #FF5A28;
  .text {
    background: transparent;
    color: black;
    animation: showup 3s linear forwards;
  }
}
</style>
